<template>
  <view class="task-detail-page">
    <!-- 任务基本信息 -->
    <view class="task-basic-info">
      <view class="task-title">{{taskInfo.title}}</view>
      <view class="task-price">
        <text class="price">¥{{taskInfo.price}}</text>
        <text class="unit">/{{taskInfo.unit}}</text>
      </view>
      <view class="task-tags">
        <view class="tag" v-for="(tag, index) in taskInfo.tags" :key="index">{{tag}}</view>
      </view>
      <view class="task-meta">
        <view class="meta-item">
          <uni-icons type="location" size="16" color="#666"></uni-icons>
          <text>{{taskInfo.location}}</text>
        </view>
        <view class="meta-item">
          <uni-icons type="calendar" size="16" color="#666"></uni-icons>
          <text>{{taskInfo.date}}</text>
        </view>
        <view class="meta-item">
          <uni-icons type="person" size="16" color="#666"></uni-icons>
          <text>已报名{{taskInfo.applied}}/{{taskInfo.quota}}人</text>
        </view>
      </view>
    </view>
    
    <!-- 任务图片轮播 -->
    <swiper class="task-swiper" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="500">
      <swiper-item v-for="(item, index) in taskInfo.images" :key="index">
        <image class="swiper-img" :src="item" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    
    <!-- 任务详情 -->
    <view class="task-detail-section">
      <view class="section-title">任务详情</view>
      <view class="detail-content">
        <rich-text :nodes="taskInfo.detail"></rich-text>
      </view>
    </view>
    
    <!-- 工作要求 -->
    <view class="task-requirements">
      <view class="section-title">工作要求</view>
      <view class="requirements-list">
        <view class="requirement-item" v-for="(item, index) in taskInfo.requirements" :key="index">
          <text class="dot">•</text>
          <text class="text">{{item}}</text>
        </view>
      </view>
    </view>
    
   
    
    <!-- 底部操作栏 -->
    <view class="footer">
    <!--  <view class="collect-btn" @click="toggleCollect">
        <uni-icons :type="isCollected ? 'star-filled' : 'star'" size="24" :color="isCollected ? '#ffcc00' : '#666'"></uni-icons>
        <text>{{isCollected ? '已收藏' : '收藏'}}</text>
      </view> -->
      <view class="apply-btn" @click="applyTask" :class="{disabled: isApplied}">
        {{isApplied ? '已报名' : '立即报名'}}
      </view>
    </view>
    
    <!-- 报名弹窗 -->
    <u-popup  :show="applyPopup" round="20" type="bottom">
      <view class="apply-popup">
        <view class="popup-header">
          <view class="title">报名信息</view>
          <view class="close-btn" @click="closeApplyPopup">
            <uni-icons type="closeempty" size="24" color="#999"></uni-icons>
          </view>
        </view>
        <view class="popup-content">
          <view class="form-item">
            <view class="label">姓名</view>
            <input class="input" type="text" v-model="applyForm.name" placeholder="请输入您的姓名" />
          </view>
          <view class="form-item">
            <view class="label">电话</view>
            <input class="input" type="number" v-model="applyForm.phone" placeholder="请输入您的联系电话" />
          </view>
          <view class="form-item">
            <view class="label">备注</view>
            <textarea class="textarea" v-model="applyForm.remark" placeholder="可填写您的相关经验或备注信息"></textarea>
          </view>
        </view>
        <view class="popup-footer">
          <view class="confirm-btn" @click="confirmApply">确认报名</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>

export default {
    
  data() {
    return {
      isCollected: false,
      isApplied: false,
	  applyPopup:false,
      applyForm: {
        name: '',
        phone: '',
        remark: ''
      },
      taskInfo: {
        id: 1,
        title: "周末商场促销活动兼职",
        price: 150,
        unit: "天",
        tags: ["日结", "轻松"],
        location: "朝阳区大悦城",
        date: "2023-06-10 至 2023-06-11",
        applied: 12,
        quota: 20,
        images: [
          "/static/task/1.jpg",
          "/static/task/2.jpg",
          "/static/task/3.jpg"
        ],
        detail: `
          <p>工作内容：</p>
          <p>1. 负责商场内指定品牌的产品推广</p>
          <p>2. 向顾客介绍产品特点和优惠活动</p>
          <p>3. 协助完成销售数据和客户反馈收集</p>
          <p>工作时间：10:00-19:00（中间休息1小时）</p>
        `,
        requirements: [
          "18-35岁，男女不限",
          "形象良好，沟通能力强",
          "有促销经验者优先",
          "需自备黑色裤子和白色上衣",
          "工作认真负责，不迟到早退"
        ],
        publisher: {
          id: 1,
          avatar: "/static/avatar/1.jpg",
          name: "李经理",
          company: "北京某人力资源公司",
          credit: 98
        }
      }
    }
  },
  onLoad(options) {
    // 从路由参数获取任务ID
    const taskId = options.id
    // 这里应该根据taskId请求接口获取任务详情
    // this.getTaskDetail(taskId)
    
    // 模拟检查是否已收藏和已报名
    this.checkCollectStatus()
    this.checkApplyStatus()
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    // 分享任务
    shareTask() {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        href: "https://yourdomain.com/task/detail?id=" + this.taskInfo.id,
        title: this.taskInfo.title,
        summary: "我发现一个不错的兼职机会，薪资" + this.taskInfo.price + "元/" + this.taskInfo.unit,
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        }
      });
    },
    // 检查收藏状态
    checkCollectStatus() {
      // 这里应该调用接口检查是否已收藏
      // 模拟数据
      this.isCollected = false
    },
    // 切换收藏状态
    toggleCollect() {
      // 这里应该调用接口更新收藏状态
      this.isCollected = !this.isCollected
      uni.showToast({
        title: this.isCollected ? '收藏成功' : '已取消收藏',
        icon: 'none'
      })
    },
    // 检查报名状态
    checkApplyStatus() {
      // 这里应该调用接口检查是否已报名
      // 模拟数据
      this.isApplied = false
    },
    // 报名任务
    applyTask() {
      if (this.isApplied) return
      this.applyPopup = true
      // this.$refs.applyPopup.open()
    },
    // 关闭报名弹窗
    closeApplyPopup() {
		this.applyPopup = false
      // this.$refs.applyPopup.close()
    },
    // 确认报名
    confirmApply() {
      if (!this.applyForm.name) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return
      }
      
      if (!this.applyForm.phone) {
        uni.showToast({
          title: '请输入联系电话',
          icon: 'none'
        })
        return
      }
      
      // 这里应该调用报名接口
      uni.showLoading({
        title: '提交中...'
      })
      
      // 模拟API请求
      setTimeout(() => {
        uni.hideLoading()
        this.isApplied = true
        this.taskInfo.applied += 1
        this.closeApplyPopup()
        uni.showToast({
          title: '报名成功'
        })
      }, 1000)
    },
    // 联系发布者
    contactPublisher() {
      uni.makePhoneCall({
        phoneNumber: '13800138000' // 这里应该是发布者的电话
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.task-detail-page {
  padding-bottom: 100rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
}

.header {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
  }
  
  .back-btn, .share-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.task-basic-info {
  padding: 30rpx;
  background-color: #fff;
  
  .task-title {
    font-size: 36rpx;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 20rpx;
  }
  
  .task-price {
    margin-bottom: 20rpx;
    
    .price {
      font-size: 48rpx;
      color: #ff2e4d;
      font-weight: bold;
    }
    
    .unit {
      font-size: 28rpx;
      color: #666;
      margin-left: 10rpx;
    }
  }
  
  .task-tags {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30rpx;
    
    .tag {
      padding: 6rpx 16rpx;
      background-color: #f0f9ff;
      color: #1890ff;
      font-size: 24rpx;
      border-radius: 30rpx;
      margin-right: 15rpx;
      margin-bottom: 10rpx;
    }
  }
  
  .task-meta {
    .meta-item {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #666;
      margin-bottom: 15rpx;
      
      uni-icons {
        margin-right: 10rpx;
      }
    }
  }
}

.task-swiper {
  width: 100%;
  height: 400rpx;
  
  .swiper-img {
    width: 100%;
    height: 100%;
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  padding: 25rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f5f5f5;
}

.task-detail-section {
  margin-top: 20rpx;
  background-color: #fff;
  
  .detail-content {
    padding: 30rpx;
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
  }
}

.task-requirements {
  margin-top: 20rpx;
  background-color: #fff;
  
  .requirements-list {
    padding: 30rpx;
    
    .requirement-item {
      display: flex;
      font-size: 28rpx;
      color: #333;
      line-height: 1.6;
      margin-bottom: 15rpx;
      
      .dot {
        margin-right: 10rpx;
        color: #ff2e4d;
      }
    }
  }
}

.publisher-info {
  margin-top: 20rpx;
  background-color: #fff;
  
  .publisher-content {
    display: flex;
    align-items: center;
    padding: 30rpx;
    
    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    
    .info {
      flex: 1;
      
      .name {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      
      .meta {
        font-size: 26rpx;
        color: #666;
        
        .company {
          margin-right: 20rpx;
        }
      }
    }
    
    .contact-btn {
      padding: 12rpx 30rpx;
      background-color: #1890ff;
      color: #fff;
      font-size: 28rpx;
      border-radius: 30rpx;
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1rpx solid #eee;
  padding: 0 30rpx;
  
  .collect-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120rpx;
    
    text {
      font-size: 24rpx;
      color: #666;
      margin-top: 5rpx;
    }
  }
  
  .apply-btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: #ff2e4d;
    color: #fff;
    font-size: 32rpx;
    border-radius: 40rpx;
    
    &.disabled {
      background-color: #ccc;
    }
  }
}

.apply-popup {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
    }
    
    .close-btn {
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
  .popup-content {
    padding: 30rpx;
    
    .form-item {
      margin-bottom: 30rpx;
      
      .label {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 15rpx;
      }
      
      .input {
        height: 80rpx;
        padding: 0 20rpx;
        background-color: #f7f7f7;
        border-radius: 8rpx;
        font-size: 28rpx;
      }
      
      .textarea {
        height: 160rpx;
        padding: 20rpx;
        background-color: #f7f7f7;
        border-radius: 8rpx;
        font-size: 28rpx;
      }
    }
  }
  
  .popup-footer {
    padding: 20rpx 30rpx;
    
    .confirm-btn {
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background-color: #ff2e4d;
      color: #fff;
      font-size: 32rpx;
      border-radius: 40rpx;
    }
  }
}
</style>